<style scoped>
	.el-aside {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	section {
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
	}

	.logo {
		width: 200px;
	}

	.headerLogo,
	.logo {
		cursor: pointer;
	}
</style>

<template>
	<el-container>
		<el-aside width="auto" class="header-logo tap">
			<img class="logo" src="@/assets/imgs/logo.png" alt="Logo" />
		</el-aside>
		<el-aside width="auto" class="header-logo tap">
			<el-avatar icon="el-icon-user-solid" class="headerLogo"></el-avatar>
			<el-dropdown @command="loginOut">
				<span class="el-dropdown-link">
					管理员<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="loginout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>

		</el-aside>
	</el-container>
</template>

<script>
	import { clearAllToken } from "@/utils/token";//引入
	export default {
		data() {
			return {
				activeIndex: "1",
			};
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			loginOut(command) {
				switch (command) {
					case "loginout": {
						this.$confirm('即将退出系统, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							clearAllToken()
							this.$message({
								type: 'success',
								message: '登出成功!',
							});
							this.$router.push("/")
						})
						break;
					}
				}
			}
		}
	};
</script>